<template>
  
  <div>
    
        <el-card>
          <el-form :inline="true"  size="mini">
            <el-form-item label="组长">
              <el-input v-model="query.groupLeader" placeholder="组长" />
            </el-form-item>
            <el-form-item label="班级">
              <el-select v-model="query.courseClassId" placeholder="班级">
                <el-option label="四班" value="4" />
                <el-option label="二班" value="2" />
              </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getGroupList">查询</el-button>
            </el-form-item>
          </el-form>
          <el-table
            :data="list"
            stripe
            border
            style="width: 100%"
          >
            
            <el-table-column
              type="index"
              label="序号"
              width="50px"
              align="center"
            />
            <el-table-column
              label="组ID"
              prop="groupId"
              width="120px"
              align="center"
            />
            <el-table-column
              label="课题名称"
              prop="subjectName"
              align="center"
              
            />
            <el-table-column
              label="总人数"
              prop="count"
              align="center"
              width="120px"
            />
            <el-table-column
              label="组长名字"
              prop="groupLeaderName"
              align="center"
              width="120px"
            />
            <el-table-column
              label="操作"
            
              align="center"
            >
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="checkDetail(scope.row) " >查看详情</el-button>
                <el-button size="mini"  type="primary" @click="getStudentInfoList(scope.row.subjectId,scope.row.courseClassId)" >组长指定</el-button>
           
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page="page.current"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="page.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            

          />
        </el-card>
    
    
        <el-dialog   title="组长指定"
        width="60%"
        center 
        :visible.sync="dialogTableVisible"
       
        :append-to-body="true">
        <el-table :data="gridData">
          <el-table-column property="stuName" label="姓名" width="150"></el-table-column>
          <el-table-column property="username" label="学号" width="200"></el-table-column>
          <el-table-column label="身份" width="200">
            <template slot-scope="scope">
                        {{ scope.row.identity === 1 ? '组长' : '成员' }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
             <template slot-scope="scope">   
                <el-button type="primary" width="80" v-if="scope.row.identity== 1" icon="el-icon-unlock" size="mini"  @click="groupAssign(scope.row,0)">取消指定</el-button>
                 <el-button type="primary" width="80"  v-if="scope.row.identity==0" icon="el-icon-unlock" size="mini" @click="groupAssign(scope.row,1)">指定</el-button>
                        
             </template>
          </el-table-column>
        </el-table>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogTableVisible = false">取 消</el-button>
           
          </span>
        </template>
      </el-dialog>
      
      



  </div>
</template>
<script>
import  groupapi from '@/api/subject/group'
import  subapi from '@/api/subject/subjectApi'
import  stuapi from '@/api/subject/student'

export default {
  name: 'Group',
  data() {
    return {
      list: [],
      page: {
        current: 1,
        size: 20,
        total: 0
      },
      i:1,
      query: {},
      gridData:[],
      dialogTableVisible: false,
    }
  },
  created() {
    
     
    this.getGroupList();
  },
  methods: {
    getGroupList(page =1,id=1){
  
      
      groupapi.getGroupList(this.page.current,this.page.size,this.query)
      .then(response =>{
        
  
        this.list=response.data;
        this.page.total=response.data.length
       
        
      })
      
    },
    checkDetail(i){
      
      this.$router.push({
        name:'infolist',
        params:{
          groupId: i.groupId ,
          subjectId:i.subjectId,
          subjectName:i.subjectName,
          groupLeaderName:i.groupLeaderName,
          count :i.count,
          courseClassId:i.courseClassId
        }
       });
    },
    getStudentInfoList(subjectid,classId){
          this.dialogTableVisible = true;
          stuapi.getGroupStudentInfoList(subjectid,classId)
          .then(response =>{
            this.gridData=response.data;
          }).catch(error =>{

          })
      },
      //指定组长
      groupAssign(row,i){
        stuapi.asignIdentity(row.username,i)
        .then(response =>{
        })
      }
    
  }
}
</script>
<style >

</style>
